<template>
  <div>
    <div>
      <div style="padding: 10px 0; margin: 30px 0; " >
        <div class="pd-10 textHo" style="display: inline-block" ><h1>{{article.name}}</h1></div>
        <div style="float: right">
          <div class="textHo" style="display: inline-block; cursor: pointer;">
            <i class="el-icon-user"></i>
            <span>{{article.user}}</span>
          </div>
          <div style="display: inline-block; margin-left: 20px; cursor: pointer;" class="textHo">
            <i class="el-icon-time"></i>
            <span>{{article.time}}</span>
          </div>
        </div>
      </div>
    </div>
    <div style="margin: 20px 0">
      <!-- 预览文章内容 -->
      <mavon-editor
          class="md"
          :value="article.content"
          :subfield="false"
          :defaultOpen="'preview'"
          :toolbarsFlag="false"
          :editable="false"
          :scrollStyle="true"
          :ishljs="true"
      />
    </div>

    <div style="margin: 50px 0">
      <div style="margin: 10px 0">
        <div style="border-bottom: 1px solid orange; padding: 10px 0; font-size: 20px">评论</div>
        <div style="padding: 10px 0">
          <el-input type="textarea" v-model="commentForm.content"></el-input>
        </div>
        <div class="pd-10" style="text-align: right">
          <el-button type="primary" size="small" @click="save">评论</el-button>
        </div>
      </div>
<!--      评论列表-->
      <div>
        <div v-for="item in comments" :key="item.id" style="border-bottom: 1px solid #ccc;padding: 10px 0;">
<!--          一级评论-->
          <div style="display: flex">
            <div style="width: 100px; text-align: center"> <!--头像-->
              <el-image :src="item.avatarUrl" style="width: 50px; height: 50px; border-radius: 50%"></el-image>
            </div>

            <div style="flex: 1; font-size: 14px; padding: 5px 0; line-height: 25px"><!--内容-->
              <div style="">
                <b>{{item.nickname}}:</b>
                <span style="margin-left: 10px;">{{item.content}}</span>
                <div style="text-align: left; margin-top: 30px;">
                  <div style="display: inline-block">
                    <i class="el-icon-time"></i>
                    <span style="margin-left: 10px;">{{item.time}}</span>
                  </div>
                  <div style="display: inline-block; margin-left: 50px">
                    <el-button style="margin-left: 5px" type="text" @click="handleReply(item.id)">回复</el-button>
                  </div>
                  <div v-if="user.id == item.userId" style="display: inline-block;float: right;">

                    <el-button style="margin-left: 20px; color: red" type="text" @click="del(item.id)" >删除</el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
<!--          多级评论-->
          <div v-if="item.children.length"  style="padding-left: 35px; ">
            <div v-for="subItem in item.children " :key="subItem.id" style="padding: 5px 30px; display: flex">
              <!--            回复列表-->
              <div style="width: 80px; text-align: center;"> <!--头像-->
                <el-image :src="subItem.avatarUrl" style="width: 35px; height: 35px; border-radius: 50%"></el-image>
              </div>
              <div style="flex: 1; font-size: 14px; padding: 5px 0; line-height: 25px"><!--内容-->
                <div>
                  <span>回复 </span><b style="color: #3a8ee6">@{{subItem.pnickName}}</b>
                </div>
                <div style="padding-left: 10px">
                  <b>{{subItem.nickname}}:</b>
                  <span style="margin-left: 10px;">{{subItem.content}}</span>
                  <div style="text-align: left; margin-top: 20px;">
                    <div style="display: inline-block">
                      <i class="el-icon-time"></i>
                      <span style="margin-left: 10px;">{{subItem.time}}</span>
                    </div>
                    <div style="display: inline-block; margin-left: 50px">
                      <el-button style="margin-left: 5px" type="text" @click="handleReply(subItem.id)">回复</el-button>
                    </div>
                    <div v-if="user.id == subItem.userId" style="display: inline-block;float: right;">

                      <el-button style="margin-left: 20px; color: red" type="text" @click="del(subItem.id)" >删除</el-button>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
      </div>



    <el-dialog title="文章信息" :visible.sync="dialogFormVisible" width="50%">
      <el-form :model="commentForm"  label-width="80px" size="small">
        <el-form-item label="标题" >
          <el-input type="textarea" v-model="commentForm.contentReply" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>



export default {
  name: "ArticleDetail",
  data(){
    return{
      article: {}, //分页数据
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")):{},
      comments: [], //评论列表
      commentForm:{}, //当前用户评论
      id: this.$route.query.id, //文章id
      dialogFormVisible: false
    }
  },
  created() {
    this.load();
    this.loadComment();
  },
  methods:{
    //分页请求
    load(){
      this.request.get("/article/"+this.id).then(res =>{
        if(res.code === "200"){
          this.article = res.data
        }else {
          this.$message.error(res.msg)
        }
      })
    },
    loadComment(){
      this.request.get("/comment/tree/"+this.id).then(res =>{
        if(res.code === "200"){
          this.comments = res.data
        }else {
          this.$message.error(res.msg)
        }
      })
    },
    //评论
    save(){
      if(this.user.id){
        if(this.commentForm.contentReply){
          this.commentForm.content = this.commentForm.contentReply;
        }
        this.commentForm.articleId = this.id
        this.request.post("/comment", this.commentForm).then(res=>{
          if(res.code ==="200"){
            this.$message.success(res.data)
            this.commentForm={}
            this.loadComment();
            this.dialogFormVisible =false
          }else {
            this.$message.error(res.msg)
          }
        })
      }else{
        this.$message.warning("请先登录")
      }
    },
    //删除评论
    del(id){
      this.request.delete("/comment/"+id).then(res=>{
        if(res.code === "200"){
          this.$message.success(res.data)
          this.loadComment()
        }else {
          this.$message.error(res.msg)
        }
      })
    },
    //多级回复
    handleReply(pid){
      this.commentForm={ pid: pid}
      this.dialogFormVisible = true;
    },
    //取消
    cancel(){
      this.commentForm ={}
      this.dialogFormVisible =false
    }
  }
}
</script>

<style scoped>
.textHo:hover{
  color: #3a8ee6;
}
</style>